<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>register</title>
    <link rel="stylesheet" href="./css/注册登入.css">
    <script src="./js/jquery.js"></script>
</head>
<style>
    body {

        overflow: hidden;
        background: url("./img/R-C.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        opacity: 0.9;
    }

    .main {
        width: 380px;
        height: 315px;
        padding: 10px;
        margin: 15% auto;
    }

    .register-box {
        width: 340px;
        height: 305px;
        margin: auto;
    }

    .title {
        text-align: center;
        font-size: 24px;
        font-weight: 500;
        margin-bottom: 15px;
    }

    .account,
    .pwd,
    .pwd2,
    .nick {
        text-align: center;
    }

    .register-button {
        width: 315px !important;
        display: block !important;
        margin: 5px auto;
    }

    .main {
        background: rgb(250, 250, 250);
    }

    .register {
        position: relative;
        left: 202px;
        color: #32dde3;
        text-decoration: none;
    }
</style>

<body>
    <div id="all">
        <div class="wrapper-login">
            <div class="header"></div>
            <div class="main">
                <div class="register-box">
                    <div class="title">HI账户注册</div>
                    <input type="text" autofocus class="nick zp-input" id="username" placeholder="昵称">
                    <input type="text" class="account zp-input" id="phone" placeholder="手机号">
                    <input type="password" class="pwd zp-input" placeholder="密码">
                    <input type="password" id="confirm" class="pwd2 zp-input" placeholder="确认密码">
                    <button class="btn register-button" id="btnenroll">注册</button>
                    <a href="./login.html" class="register">已有账户直接登录</a>
                </div>
            </div>

        </div>
    </div>
    <script>
        $(function () {
            $("#btnenroll").on("click", () => {
                //判断用户名是否空
                if (($("#username").val()) == '') {
                    alert("用户名不能为空")
                    return
                }
                //判断手机号是否空
                if (($("#phone").val()) == '') {
                    alert("手机号不能为空")
                } else {
                    var poh = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
                    if (!poh.test($("#phone").val())) {
                        alert('请输入正确的手机号')
                        return;
                    }
                }
                //判断密码是否空，还有是否有8-16位
                if (($(".pwd").val()) == '') {
                    alert("密码不能为空")
                } else {
                    const $passus = /^\w{8,16}$/;
                    if (!$passus.test($(".pwd").val())) {
                        alert("请输入8-16位密码");
                        return
                    }
                }
                //判断第两次密码是否空
                if ($(".pwd2").val() == "") {
                    alert("请再次输入密码!");
                    return;
                }
                //判断两次密码有没有一致
                if ($(".pwd").val() != $(".pwd2").val()) {
                    alert("两次密码不一致，请重新输入!");
                    return;
                }
                //用ajax调用接口
                $.ajax({
                    type: "post",
                    url: "http://127.0.0.1:3001/api/sign",
                    data: { nick_name: $("#username").val(), user_name: $("#phone").val(), password: $(".pwd").val() },
                    success: function (res) {
                        if (res.status==1) {
                            console.log(res.message)
                        } 
                        window.location.href = "login.html";
                    }
                })
            })

        })





    </script>
</body>

</html>